<script setup>
import {request} from "@/util/request.js";
import {ref} from "vue";
import {useUserStore} from "@/store/user.js";
import {ElMessage} from "element-plus";

const userStore = useUserStore();
const roles = ref([])
const role = ref({})

const editRole = ref({})

// 发送请求获取所有 role
request.get('/role/list?parentId=0', {
    headers: {
        'Authorization': userStore.token
    }
}).then(res => {
    roles.value = res.data
})

// 删除操作
function handleDelete(index, row) {
    request.get('/role/delete/' + row.roleId, {
        headers: {
            'Authorization': userStore.token
        }
    }).then(res => {
        if (res.code === 1) {
            ElMessage.success("删除成功")
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 控制修改的弹窗
const dialogVisible = ref(false)

// 修改操作 弹窗显示 给修改的对象 赋值
function handleEdit(row) {
    dialogVisible.value = true
    editRole.value = row
}

// 关闭弹窗
function handleClose() {
    ElMessage.info("取消修改")
    dialogVisible.value = false
}

/**
 * 修改角色
 */
function submitEdit() {
    request.post('/role/edit', JSON.stringify(editRole.value), {
        headers: {
            'Authorization': userStore.token,
            'Content-type': 'application/json;charset=UTF-8'
        }
    }).then(res => {
        dialogVisible.value = false
        if (res.code === 1) {
            ElMessage.success("修改成功！")
        } else {
            ElMessage.error("修改失败")
        }
    })
}

// 格式化时间
function formatterTime(row, column, cellValue, index) {
    return new Date(cellValue).toLocaleString()
}

const options = [
    {
        value: '1',
        label: '启用',

    },
    {
        value: '0',
        label: '禁用'
    }
]

// 搜索
function handleSearch() {
    request.get("/menu/list?roleName=" + role.value.roleName + "&roleIdentifier=" + role.value.roleIdentifier + "&roleStatus=" + role.value.roleStatus, {
        headers: {
            'Authorization': userStore.token
        }
    }).then(res => {
        roles.value = res.data
    })
}

// 重置
function handleReset() {
    role.value = {}
    handleSearch()
}
</script>

<template>
    <el-row>
        <el-col>
            <!--按照条件搜索-->
            <el-form label-width="80px" size="large" :model="role">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="菜单名称">
                            <el-input v-model="role.roleName" placeholder="请输入菜单名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="权限字符">
                            <el-input v-model="role.roleIdentifier" placeholder="请输入权限字符"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="状态">
                            <el-select v-model="role.roleStatus" class="m-2" placeholder="菜单状态" size="large">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="2">
                        <el-button type="primary" size="default" @click="handleSearch">搜索</el-button>
                        <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="roles"
                style="width: 100%; margin-bottom: 20px"
                row-key="roleId">
                <el-table-column label="角色编号" prop="roleId" width="160"/>
                <el-table-column label="角色名称" prop="roleName"/>
                <el-table-column label="权限字符" prop="roleIdentifier" sortable/>
                <el-table-column label="状态" prop="roleStatus">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.roleStatus"
                            class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            :active-value="1"
                            :inactive-value="0"/>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180" prop="createdAt" sortable :formatter="formatterTime"/>
                <el-table-column label="操作" width="200">
                    <template #default="scope" v-if="role.roleIdentifier !== 'admin'">
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!--修改信息-->
    <el-dialog
        v-model="dialogVisible"
        title="修改角色信息"
        width="50%"
        :before-close="handleClose">
        <el-form label-width="80px" size="large" style="width: 80%; margin: 0 auto">
            <el-form-item label="角色名称">
                <el-input v-model="editRole.roleName"/>
            </el-form-item>
            <el-form-item label="菜单权限">
                <!--  TODO 查询菜单目录并渲染  -->
            </el-form-item>
            <el-form-item label="权限字符">
                <el-input v-model="editRole.roleIdentifier"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="editRole.roleStatus" class="ml-4">
                    <el-radio :label="1" size="large">正常</el-radio>
                    <el-radio :label="0" size="large">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="editRole.roleNotes" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitEdit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
</style>